DIV.table 
    {
        display:table;
    }
    FORM.tr, DIV.tr
    {
        display:table-row;
        padding: 3px;
    }
    SPAN.td
    {
        display:table-cell;
        padding-right: 0px;
        padding-left: 4px;
    }

h1 { font-family: "Open Sans"; font-size: 11px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 11px; } h3 { font-family: "Open Sans"; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px; } p { font-family: "Open Sans"; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; } blockquote { font-family: "Open Sans"; font-size: 21px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 30px; } pre { font-family: "Open Sans"; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18.5714px;}
SPAN.td { font-family: "Open Sans"; font-size: 11px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 11px; }

input { margin-left: 2px; margin-top: 1px; margin-bottom: 1px; font-family: "Open Sans"; font-size: 11px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 11px;}
select { margin-left: 2px; margin-top: 1px; margin-bottom: 1px; font-family: "Open Sans"; font-size: 11px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 11px;}

#HomePlayer1,#HomePlayer2,#HomePlayer3,#HomePlayer4,#AwayPlayer1,#AwayPlayer2,#AwayPlayer3,#AwayPlayer4 {
    width: 150px;
}
#HomePlayerMen1,#HomePlayerMen2,#HomePlayerMen3,#HomePlayerMen4, #HomePlayerLadies1,#HomePlayerLadies2,#HomePlayerLadies3,#HomePlayerLadies4 {
    width: 150px;
}
#AwayPlayerMen1,#AwayPlayerMen2,#AwayPlayerMen3,#AwayPlayerMen4, #AwayPlayerLadies1,#AwayPlayerLadies2,#AwayPlayerLadies3,#AwayPlayerLadies4 {
    width: 150px;
}
.backgroundblocks {
  border-radius: 10px;
  background: #ffe6cc;
  padding: 7px; 
  width: 300px;
}


@media (min-width: 858px) {
    html {
        font-size: 12px;
    }
}

@media (min-width: 780px) {
    html {
        font-size: 11px;
    }
}

@media (min-width: 702px) {
    html {
        font-size: 10px;
    }
}

@media (min-width: 724px) {
    html {
        font-size: 9px;
    }
}

@media (max-width: 623px) {
    html {
        font-size: 8px;
    }
}    
  
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #ccc;
    color: #006080;
}

.tooltip .tooltiptext {
    visibility: hidden;
    position: absolute;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip-right {
  top: -5px;
  left: 200%;  
}

.tooltip-right::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #555 transparent transparent;
}

.tooltip-bottom {
  top: 135%;
  left: 50%;  
  margin-left: -60px;
}

.tooltip-bottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

.tooltip-top {
  bottom: 125%;
  left: 50%;  
  margin-left: -60px;
}

.tooltip-top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip-left {
  top: -5px;
  bottom:auto;
  right: 128%;  
}
.tooltip-left::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #555;
}